<template>
<div class="forgot-password-container">
    <div class="forgot-password-header">
        <van-nav-bar title="找回密码" left-arrow @click-left="$router.push('/login')" />
    </div>

    <div class="forgot-password-content">
        <div class="steps-container">
            <van-steps :active="currentStep" active-color="#1989fa">
                <van-step>验证身份</van-step>
                <van-step>重置密码</van-step>
                <van-step>完成</van-step>
            </van-steps>
        </div>

        <!-- 步骤1：验证身份 -->
        <div v-if="currentStep === 0" class="step-form">
            <van-form @submit="verifyIdentity">
                <van-field v-model="phone" type="tel" name="phone" label="手机号" placeholder="请输入注册手机号" :rules="[
                    { required: true, message: '请输入手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]" />

                <van-field v-model="smsCode" center clearable label="验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请输入验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" :disabled="isCounting" @click="sendSmsCode">
                            {{ isCounting ? `${countdown}秒后重发` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>

                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit">
                        下一步
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 步骤2：重置密码 -->
        <div v-if="currentStep === 1" class="step-form">
            <van-form @submit="resetPassword">
                <van-field v-model="newPassword" type="password" name="newPassword" label="新密码" placeholder="请输入新密码"
                    :rules="[
                        { required: true, message: '请输入新密码' },
                        { min: 6, message: '密码至少6位' }
                    ]" />

                <van-field v-model="confirmPassword" type="password" name="confirmPassword" label="确认密码"
                    placeholder="请再次输入新密码" :rules="[
                        { required: true, message: '请再次输入新密码' },
                        { validator: validateConfirmPassword, message: '两次密码不一致' }
                    ]" />

                <div class="submit-btn">
                    <van-button round block type="primary" native-type="submit">
                        确认修改
                    </van-button>
                </div>
            </van-form>
        </div>

        <!-- 步骤3：完成 -->
        <div v-if="currentStep === 2" class="success-container">
            <van-icon name="checked" size="60" color="#1989fa" />
            <p class="success-text">密码重置成功</p>
            <p class="success-desc">您的密码已经重置成功，请使用新密码登录</p>
            <div class="success-btn">
                <van-button round block type="primary" @click="$router.push('/login')">
                    返回登录
                </van-button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'ForgotPasswordPage',
    data() {
        return {
            currentStep: 0,
            phone: '',
            smsCode: '',
            newPassword: '',
            confirmPassword: '',
            isCounting: false,
            countdown: 60
        }
    },
    methods: {
        validateConfirmPassword() {
            return this.newPassword === this.confirmPassword
        },

        sendSmsCode() {
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                this.$toast('请输入正确的手机号')
                return
            }

            // 模拟发送验证码
            this.$toast.success('验证码已发送')
            this.isCounting = true
            this.countdown = 60

            const timer = setInterval(() => {
                this.countdown--
                if (this.countdown <= 0) {
                    clearInterval(timer)
                    this.isCounting = false
                }
            }, 1000)
        },

        verifyIdentity() {
            // 模拟验证身份
            this.$toast.loading({
                message: '验证中...',
                forbidClick: true
            })

            setTimeout(() => {
                this.$toast.clear()
                this.currentStep = 1
            }, 1000)
        },

        resetPassword() {
            // 模拟重置密码
            this.$toast.loading({
                message: '提交中...',
                forbidClick: true
            })

            setTimeout(() => {
                this.$toast.clear()
                this.currentStep = 2
            }, 1000)
        }
    }
}
</script>

<style scoped>
.forgot-password-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.forgot-password-content {
    padding: 20px;
}

.steps-container {
    margin: 20px 0 30px;
}

.step-form {
    margin-top: 20px;
}

.submit-btn {
    margin-top: 30px;
}

.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    text-align: center;
}

.success-text {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #323233;
}

.success-desc {
    margin-top: 10px;
    font-size: 14px;
    color: #969799;
}

.success-btn {
    margin-top: 30px;
    width: 100%;
}
</style>